<template>
  <div class="provider">
      <div class="providerNavBar">
          <van-nav-bar title="供应商" @click-left="goback" left-arrow>
          </van-nav-bar>
      </div>
      <div class="providerInfo" v-for="(provider,pro) in provider" :key="pro" @click="$router.push('/base')">
          <div class="providerLeft">
              <img :src="provider.businessLogo">
          </div>
          <div class="providerRight">
              <div class="providerHand">
                  <span class="providerTitle">{{provider.businessName}}</span>
                  <span class="providerAuict">{{provider.authGrade}}级认证</span>
              </div>
              <div class="providerSaleshop">
                  <span>{{provider.shop}}</span>
              </div>
          </div>
          <div class="providerBtn">
              <van-button color="#FF6200">在线沟通</van-button>
          </div>
      </div>
      <div class="providerShop"
              v-for="(item,addGoods) in addGoods"
              :key="addGoods"
              @click="$router.push(`/goodsDetail?id=${item.id}&productType=2`)">
          <goodsComponent 
          :addGoods="item"
          ></goodsComponent>
      </div>
  </div>
</template>

<script>
import goodsComponent from "../../components/goodsComponent";
import { shoppingService } from "@/api"
export default {
    name: "provider",
    data(){
        return{
            provider:[],
            addGoods: [],
            }
        },
    created(){
        this.asgetSupplier();
        },
    methods:{
    // 返回上一层
        goback(){
            this.$router.go(-1);
        },
    // 获取供应商
    async asgetSupplier() {
      const { data } = await shoppingService.getSupplier(1,1,10);
      console.log(data, "供应商");
      this.provider = data.list;
      this.addGoods = data.list[0].productList;
      console.log(this.addGoods,"???");
    },
            },
    components:{
        goodsComponent,
    }
}
</script>

<style scoped>
.provider{

}
.providerInfo{
    display: flex;
    margin-top: 20px;
    margin-left: 13px;
}
.providerLeft{

}
.providerLeft img{
    width: 45px;
    height: 45px;
    border-radius: 25px;
}
.providerRight{

}
.providerHand{
    margin-left: 10px;
}
.providerTitle{
    font-size:14px;
    font-family:PingFang SC;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:20px;
}
.providerAuict{
    border-radius:5px 0px 5px 0px;
    background-color: #fff0e6;
    color: #FF6200;
    font-size: 10px;
}
.providerSaleshop{
    margin-left: 10px;
    margin-top: 5px;
}
.providerSaleshop span{
    font-size:10px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(153,153,153,1);
    line-height:20px;
}
.providerBtn{
    margin-left: 63px;
    vertical-align: middle;
}
.providerBtn button{
    width:90px;
    height:30px;
    border-radius:3px;
    margin-top: 10px;
}
.providerShop{
    background:rgba(247,249,252,1);
}
</style>